
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>慕课手机练习</title>
    <link rel="stylesheet" href="./css/base.css" type="text/css">
    <link rel="stylesheet" href="./css/index.css" type="text/css">
    <link rel="stylesheet" href="./css/animation.css" type="text/css">
</head>

<body>
    <div class="box">
        <!-- header -->
        <div class="header">
            <div class="header__wrap">
                <div class="header__logo">
                    测试页面
                </div>
                <div class="header__nav">
                    <a href="javascript:" class="header__nav-item ">首页</a>
                    <a href="javascript:" class="header__nav-item">外观</a>
                    <a href="javascript:" class="header__nav-item">配置</a>
                    <a href="javascript:" class="header__nav-item">型号</a>
                    <a href="javascript:" class="header__nav-item">说明</a>
                    <a href="javascript:" class="header__nav-item header__nav-item_custom_button">立即购买</a>
                    <div class="header__nav-tip"></div>
                </div>
            </div>
        </div>
        <!-- screen-1 -->
        <div class="screen-1">
            <h2 class="screen-1__heading screen-1__heading_animation_init">
                <b>慕课手机</b>&nbsp;让你的生活更精彩
            </h2>
            <div class="screen-1__phone screen-1__phone_animation_init"></div>
            <div class="screen-1__shadow screen-1__shadow_animation_init"></div>
        </div>
        <!-- screen-2 -->
        <div class="screen-2">
            <div class="screen-2__heading">优美的设计,更令人着迷</div>
            <div class="screen-2__subheading">采用受欢迎的设计,让它更出色.<br />款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致
            </div>
            <div class="screen-2__phone">
                <div class="screen-2__point screen-2__point_i_1">高清摄像</div>
                <div class="screen-2__point screen-2__point_custom_right screen-2__point_i_2">超薄机身</div>
                <div class="screen-2__point screen-2__point_custom_right screen-2__point_i_3">大屏显示</div>
            </div>
        </div>
        <!-- screen-3 -->
        <div class="screen-3">
            <div class="screen-3__wrap">
                <div class="screen-3__heading">外形小巧，功能强大的手机</div>
                <div class="screen-3__subheading">采用受欢迎的设计，让它更加出色。<br />款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</div>
                <div class="screen-3__phone"></div>
                <div class="screen-3__features">
                    <div class="screen-3__features__item">
                        <div class="screen-3__features__item__number">5.7</div>
                        <div class="screen-3__features__item__des">英寸大屏</div>
                    </div>
                    <div class="screen-3__features__item">
                        <div class="screen-3__features__item__number">1200</div>
                        <div class="screen-3__features__item__des">万像素</div>
                    </div>
                    <div class="screen-3__features__item">
                        <div class="screen-3__features__item__number">3D</div>
                        <div class="screen-3__features__item__des">touch</div>
                    </div>
                    <div class="screen-3__features__item">
                        <div class="screen-3__features__item__number">A9</div>
                        <div class="screen-3__features__item__des">处理器</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- screen-4 -->
        <div class="screen-4">
            <div class="screen-4__wrap">
                <div class="screen-4__heading">丰富的手机型号</div>
                <div class="screen-4__subheading">找到适合你的手机</div>
                <div class="screen-4__type">
                    <div class="screen-4__type__item screen-4__type__item_i_1">
                        <div class="screen-4__type__item__des">慕课红</div>
                        <div class="screen-4__type__item__storage">16G/32G/64G</div>
                    </div>
                    <div class="screen-4__type__item screen-4__type__item_i_2">
                        <div class="screen-4__type__item__des">土豪金</div>
                        <div class="screen-4__type__item__storage">16G/32G/64G</div>
                    </div>
                    <div class="screen-4__type__item screen-4__type__item_i_3">
                        <div class="screen-4__type__item__des">太空灰</div>
                        <div class="screen-4__type__item__storage">16G/32G/64G</div>
                    </div>
                    <div class="screen-4__type__item screen-4__type__item_i_4">
                        <div class="screen-4__type__item__des">绅士黑</div>
                        <div class="screen-4__type__item__storage">16G/32G/64G</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- screen-5 -->
        <div class="screen-5">
            <div class="screen-5__heading">游戏、学习、拍照、有这一部就够了</div>
            <div class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</div>
            <div class="screen-5__bg"></div>
        </div>
        <!-- 立即购买 -->
        <div class="screen__buy">
            <a href="javascript:;" class="screen__buy__button">立即购买</a>
        </div>
        <!-- footer -->
        <footer class="footer">
            © 2016 imooc.com 京ICP备13046642号
        </footer>
        <div class="outline">
            <a href="javascript:?" class="outline__item ">首页</a>
            <a href="javascript:?" class="outline__item">外观</a>
            <a href="javascript:?" class="outline__item">配置</a>
            <a href="javascript:?" class="outline__item">型号</a>
            <a href="javascript:?" class="outline__item">说明</a>
        </div>
        
    </div>
   

    <script type="text/javascript" src="js/index.js"></script>

</body>

</html>